import { Form, Input, Modal, Button,message } from 'antd';
import { formatMessage, connect } from 'umi';
import PasswordValidInput from '@/components/PasswordValidInput'
import ImgCaptchaInput from '@/components/ImgCaptchaInput'
import React, { useState, useEffect } from 'react';
import {updatePassword} from '@/services/user'
const FormItem = Form.Item;


const PasswordSetting = (props) => {
    const {
        visible,
        onCancel,
        dispatch,
        imageCaptchaApplyId,
    } = props;
    const [form] = Form.useForm();
    const onOK = async () => {
        await form.validateFields()
        let data = {
            password:form.getFieldValue('password'),
            originalPassword:form.getFieldValue('originalPassword'),
            captchaApplyId:imageCaptchaApplyId,
            captchaCode:form.getFieldValue('imgCaptchaCode')
        }
        try {
            const result =  await updatePassword(data);
            console.log(result)
            if (result.success) {
                message.success('修改成功');
                form.resetFields();
                onCancel();
            } else {
                message.error(result.errMsg);
            }
          } catch (error) {
            message.error('配置失败请重试！');
        }
    };

    useEffect(() => {
        if (dispatch && visible) {
            dispatch({
                type: 'common/getImageCaptchaApplyId',
            });
        }
    }, [visible])

    const checkConfirm = (_, value) => {
        const promise = Promise;

        if (value && value !== form.getFieldValue('password')) {
            return promise.reject(
                '两次输入的密码不匹配',
            );
        }

        return promise.resolve();
    };

    const onChangeImgCaptcha = () => {
        dispatch({
            type: 'common/getImageCaptchaApplyId',
        });
    }

    return (
        <Modal title="修改密码" width={580} visible={visible} onCancel={onCancel} onOk={onOK} destroyOnClose={true}>
            <Form form={form} name="PasswordSetting">
                <PasswordValidInput form={form}></PasswordValidInput>
                <FormItem
                    name="confirmPassword"
                    rules={[
                        {
                            required: true,
                            message: '请输入新密码',
                        },
                        {
                            validator: checkConfirm,
                        },
                    ]}
                >
                    <Input
                        size="large"
                        type="password"
                        placeholder="请输入密码"
                    />
                </FormItem>
                <ImgCaptchaInput onClickImage={onChangeImgCaptcha} imageCaptchaApplyId={imageCaptchaApplyId}></ImgCaptchaInput>
                <FormItem
                    name="originalPassword"
                    rules={[
                        {
                            required: true,
                            message: "请输入原密码",
                        }
                    ]}
                >
                    <Input
                        size="large"
                        type="password"
                        placeholder="请输入原密码"
                    />
                </FormItem>
            </Form>
        </Modal>
    )
}


export default connect(({ common }) => ({
    imageCaptchaApplyId: common.imageCaptchaApplyId
}))(PasswordSetting);